본문으로 건너뛰기

useRef 소개와 useState 대신 컴포넌트 변수 생성

useRef란?​

useRef는 React에서 제공하는 훅(hook)으로, 함수형 컴포넌트에서 DOM 요소나 어떤 값을 기억하고 싶을 때 사용합니다. useRef는 클래스형 컴포넌트에서 ref를 사용하는 방식과 유사합니다. 주로 DOM 요소를 조작하거나, 상태 변화 없이 값을 저장할 때 유용합니다.

기본 사용법​

우선, useRef를 사용하는 기본적인 예제를 살펴보겠습니다.

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Focus the input</button>
    </div>
  );
}

export default FocusInput;

위 예제에서는 inputRef를 사용하여 input 요소에 접근하고, 버튼을 클릭했을 때 해당 input 요소에 포커스를 맞추는 동작을 합니다. useRef를 통해 생성된 객체는 .current라는 프로퍼티를 가지며, 이를 통해 실제 DOM 요소에 접근할 수 있습니다.

useRef와 useState의 차이점​

useState와 useRef는 값의 저장이라는 공통점이 있지만, 다음과 같은 차이점이 있습니다:

  1. 리렌더링: useState는 상태가 변경되면 컴포넌트를 리렌더링합니다. 반면, useRef는 값이 변경되어도 리렌더링하지 않습니다.
  2. 목적: useState는 주로 UI 업데이트가 필요한 상태 값을 관리할 때 사용하고, useRef는 DOM 접근이나 상태 변경과 관계없이 값을 유지하고 싶을 때 사용합니다.

예제: useRef로 useState 대체하기​

아래 예제는 useState 대신 useRef를 사용하여 값이 변경되어도 리렌더링되지 않는 상황을 보여줍니다.

import React, { useRef, useState } from 'react';

function Counter() {
  const countRef = useRef(0);
  const [, forceUpdate] = useState();

  const handleClick = () => {
    countRef.current += 1;
    forceUpdate({});
  };

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

위 예제에서 countRef는 useRef로 생성된 값입니다. 버튼을 클릭할 때마다 countRef.current의 값이 증가하지만, 컴포넌트는 리렌더링되지 않습니다. 대신, forceUpdate라는 빈 상태를 업데이트하여 강제로 리렌더링을 트리거합니다.

주의할 점​

useRef를 사용할 때 주의해야 할 몇 가지 사항이 있습니다:

  • DOM 요소 조작: 직접 DOM 요소를 조작하는 것은 React의 선언형 프로그래밍 패러다임에 맞지 않을 수 있습니다. 필요할 때만 사용하고, 가능한 한 상태를 통해 UI를 업데이트하도록 하세요.
  • 리렌더링과 상태 관리: useRef는 상태를 관리하지 않기 때문에 값이 변경되어도 UI에 반영되지 않습니다. 따라서 UI 업데이트가 필요한 값은 useState를 사용해야 합니다.

더 알아보기​

  • React 공식 문서: React useRef
  • 리액트 상태 관리: 리액트에서 상태 관리와 관련된 추가 자료를 살펴보세요.
  • DOM 조작: useRef를 사용한 DOM 조작에 대해 더 알아보세요.

내용 요약과 다음 주제​

useRef는 함수형 컴포넌트에서 DOM 요소나 값을 기억하기 위해 사용되는 훅입니다. 리렌더링 없이 값을 저장할 수 있어 유용하며, 주로 DOM 접근이나 비상태 값을 유지하는 데 사용됩니다. 다음 주제인 이전 상태 활용에서는 상태 업데이트 함수에서 이전 상태를 활용하는 방법에 대해 알아보겠습니다.